<template>
  <view class="login-page">
    <view class="login-container flex-cc flex-col">
      <view class="login">
        <view class="login-input flex-sc">
          <view>
            <image src="/static/user.png" class="icon" />
          </view>
          <input class="input" type="text" placeholder="请输入用户名" v-model="user.account" />
        </view>
        <view class="login-input flex-sc">
          <view>
            <image src="/static/password.png" class="icon" />
          </view>
          <input class="input" :type="showPassword?'password':'text'" placeholder="请输入密码" v-model="user.password" />
          <view>
            <image :src="showPassword?'/static/view.png':'/static/unview.png'" style="margin-right:15px" class="icon" @click="togglePassword" />
          </view>
        </view>
        <button class="btn" type="primary" @click="login">登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex';
import { MD5 } from 'crypto-js';
import { getProfessorLogin } from '../../utils/http';
export default {
  data () {
    return {
      showPassword: true,
      user: {
        account: '',
        password: ''
      }
    }
  },
  methods: {
    // 使用vuex的mutations
    ...mapMutations(['setUserInfo']),
    togglePassword () {
      this.showPassword = !this.showPassword;
    },
    async login () {
      const res = {
        account: this.user.account,
        password: MD5(this.user.password).toString()
      }
      const { data, code, msg } = await getProfessorLogin(res)
      data.tags = JSON.parse(data.tags)
      data && this.setUserInfo(data);
      if (code === 0) {
        uni.navigateTo({
          url: '/pages/diagnose/professorOrder'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  height: calc(100% - 160px);
  position: relative;
  padding: 0 15px;
  
}
.login-input {
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  .input {
    width: 100%;
  }
  .icon {
    width: 24px;
    height: 24px;
    margin: 0 5px 0 15px;
  }
}
.login-container {
  width: calc(100% - 30px);
  max-width: 750px;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .login {
    width: 100%;
    margin-top: 30px;
  }
  .btn {
    border-radius: 26px;
    background: #d7ae3c;
    margin-top: 30px;
  }
}
</style>
